<template>
  <div class='container'>
    <el-dialog width="500px" :title="title" :visible="showTagDialog" @close="cancelFn">
      <el-form ref="tagForm" :model="tagForm" :rules="rule" label-width="80px">
        <el-form-item v-bind:class="{ removeSelect: getSubjectID }" style="width: 120px" label="所属学科">
          <el-select v-model="value" style="width: 500px"  value>
            <el-option
              v-for="item in subjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="tagName" label="标签名称">
          <el-input v-model="tagForm.tagName" style="width: 500px" />
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="8">
            <el-button @click="cancelFn">取消</el-button>
            <el-button type="primary" @click="confirmFn">确认</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addTag, getSimpleSubjects, getTagDetail, editTagById } from '@/api/hmmm/tags'

export default {
  name: 'TagsAdd',
  props: {
    showTagDialog: {
      type: Boolean,
      default: false
    },
    getSubjectID: {
      type: String
    }
  },
  data () {
    return {
      tagForm: { // 新增标签表单
        subjectName: '', // 学科名称
        tagName: '', // 目录名称
        id: '' // 区分新增和修改
      },
      rule: { // 校验规则
        tagName: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }]
      },
      subjectList: [], // 获取简单学科列表
      value: '' // subjectID
    }
  },
  created () {
    this.getSimpleSubjects()
  },
  computed: {
    title () {
      return this.tagForm.id ? '修改标签' : '新增标签'
    }
  },
  methods: {
    async getSimpleSubjects () {
      try {
        const { data } = await getSimpleSubjects() // 调用获取简单学科列表接口
        this.subjectList = data
      } catch (err) {
        console.log(err)
      }
    },
    async confirmFn () { // 确认按钮
      if (this.tagForm.id) { // 判断新增还是修改
        try {
          await this.$refs.tagForm.validate() // 调用修改标签接口
          await editTagById({
            id: this.tagForm.id,
            subjectID: this.value,
            tagName: this.tagForm.tagName
          })
          if (!this.$parent.pageShow) {
            this.$parent.getAllCounts()
            setTimeout(() => {
              this.$parent.filterFn()
            }, 100)
          } else {
            this.$parent.getAllTags()
          }
          this.$message.success('修改标签成功')
        } catch (err) {
          console.log(err)
        }
      } else {
        try {
          await this.$refs.tagForm.validate() // 调用新增标签接口
          await addTag({
            subjectID: this.value || Number(this.getSubjectID),
            tagName: this.tagForm.tagName
          }) // 调用新增标签接口
          this.$message.success('新增标签成功')
          this.$parent.getAllTags()
        } catch (err) {
          console.log(err)
        }
      }
      this.$emit('update:showTagDialog', false)
    },
    cancelFn () { // 取消按钮
      setTimeout(() => {
        this.tagForm = { // 重置标签表单
          subjectName: '',
          tagName: '',
          id: ''
        }
      }, 200)
      this.value = ''
      this.$refs.tagForm.resetFields() // 重置校验
      this.$emit('update:showTagDialog', false)
    },
    async getTagDetail (id) { // 回填 tagform
      this.tagForm.id = id
      try {
        const { data } = await getTagDetail(id)
        console.log(data)
        this.tagForm.tagName = data.tagName
        this.value = data.subjectID
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.el-select,
.el-input {
  width: 360px!important;
}
.removeSelect {
  display: none;
}
</style>
